<template>
  <div class="wx-apply-emp-wrap">

    <div class="wx-apply-emp-box" ref="wrapper" v-if="showData == 1">

      <div class="wx-apply-emp-con-list">
        <div class="wx-apply-emp-list" v-for="(item,index) in workOrderList" :key="index">
          <div class="apply-line-box"></div>

          <div class="wx-apply-emp-content">
            <div class="wx-apply-emp-con1">
              <span class="apply-name">{{item.userName}}</span>
              <img src="../../assets/img/phone_icon.png" class="pic" onclick="return false"
                   @click="callPhone(item.userTel)"/>
            </div>

            <div class="wx-apply-emp-con2">
              <span>报名企业：{{item.mechanismName}}</span>
              <span>报名时间：{{item.time | format}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关数据~</div>
      </div>
    </div>

    <!--微信绑定手机号-->
    <v-phone v-model="showModal" @bindPhone="bindCustomerPhone"></v-phone>

  </div>
</template>

<script>
  import {baseUrl} from "../../config/env";
  import {formatDate, getDeviceRatio, getSessionStore, getUrlKey, setSessionStore} from "../../config/util";
  import phone from "../../components/phone";
  import BScroll from 'better-scroll';
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        showModal: false,
        countentPhone: "",
        userSign: "",
        currentPage: 1,
        PageSize: 20,
        workOrderList: [],
        showData: 0,
        workOrderScroll: null,
        noMoreData: false,
      }
    },
    mounted() {
      this.userSign = getUrlKey("success"); //微信openid
      this.countentPhone = getUrlKey("countentPhone"); //手机框 0弹出1不弹出
      let base64 = require('js-base64').Base64;
      if (this.userSign != "" && this.userSign != "null" && this.userSign != null) {
        setSessionStore("success", base64.encode(this.userSign));
        this.userSign = base64.decode(getSessionStore("success"));
      } else {
        this.userSign = base64.decode(getSessionStore("success"));
      }

      if (this.countentPhone == "0") {
        this.showModal = true;
      } else {
        this.getWorkOrderList();
      }
    },
    methods: {
      getWorkOrderList() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_work_order_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_work_order_list?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.showData = 1;
              this.workOrderList = resultObj.data;

              this.$nextTick(() => {
                this.initScroll();
                this.workOrderScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.workOrderScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/get_work_order_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/get_work_order_list?sgin=" + this.userSign + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.workOrderList = this.workOrderList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      bindCustomerPhone(phone) {//绑定微信客户手机号
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/wx_user/set_phone?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        //绑定微信手机
        this.axios.get(baseUrl + "/wx_user/set_phone?sgin=" + this.userSign + "&phone=" + phone + "&userName=" + "&userUrl=" + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.getWorkOrderList();
          } else {
            this.showModal = true;
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      callPhone(phone) {
        window.location.href = 'tel://' + phone;
      },
      initScroll() {//初始化BScroll
        if (!this.workOrderScroll) {
          this.workOrderScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.workOrderScroll.refresh();
        }
      },
      enable() {
        this.workOrderScroll && this.workOrderScroll.enable()
      },
      refresh() {
        this.workOrderScroll && this.workOrderScroll.refresh()
      },
      finishPullUp() {
        this.workOrderScroll && this.workOrderScroll.finishPullUp()
      },
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      },
    },
    watch: {
      workOrderList() {
        this.$nextTick(() => {
          this.workOrderScroll.refresh();
        })
      }
    },
    components: {
      "v-phone": phone,
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .wx-apply-emp-wrap
    wh(100%, 100%)
    background: #f2f2f2
    .wx-apply-emp-box
      position: fixed
      top: 0
      bottom: 0
      width: 100%
      display: flex
      flex-direction: column
      .apply-line-box
        wh(100%, 0.267rem)
        background: #f2f2f2
      .wx-apply-emp-content
        wh(100%, 3.147rem)
        background: rgba(255, 255, 255, 1)
        .wx-apply-emp-con1
          display: flex
          align-items: center
          margin-left: 3.2%
          wh(96.8%, 1.12rem)
          border-bottom: 0.027rem solid #f2f2f2
          .apply-name
            size-color(0.453rem, #333333)
            font-weight: 500
          .pic
            margin-right: 0.533rem
            margin-left: auto
            wh(0.533rem, 0.533rem)
        .wx-apply-emp-con2
          display: flex
          flex-direction: column
          justify-content: center
          size-color(0.4rem, rgba(102, 102, 102, 1))
          margin-left: 3.2%
          wh(96.8%, 2rem)
          span
            &:nth-child(1)
              padding-bottom: 0.32rem
    .empty-wrap
      fj(center, center)
      wh(100%, 100%)
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
